<script setup lang="ts">
import Tab from "./components/tab.vue";
import TabB from "./components/tabB.vue";
import TabC from "./components/tabC.vue";
import TabD from "./components/tabD.vue";
import TabList from "./components/tabList.vue";
import NavTitle from "@/components/NavTitle/index.vue";
import Lines from "@/components/lines/index.vue";
import JTabY from "@/components/j-table-y/index.vue";
import i18n from "@/locals";
import Activity from "@/views/home/component/Activity/index.vue";
import { onMounted, ref } from "vue";
const navs = ref([
    // {
    //     label: "1H",
    //     value: "H"
    // },
    {
        label: "1D",
        value: "D"
    }
]);
onMounted(() => {
    // console.log('yzt数据移动',);
    document.body.scrollTop = 0;
})
</script>
<template>
    <div class="dateAlter">
        <p class="pt-5 mb-5 c-title-1" style="margin-left: 30px; font-weight: bold">
            <!-- 数据异动 -->
            {{ $t("message.DateAlter.a") }}
        </p>
        <div class="c-grid">
            <!-- <TabList title="最大涨幅"> -->
            <TabList :title="i18n.global.t('message.DateAlter.b')">
                <Tab></Tab>
            </TabList>
            <!-- <TabList title="最大跌幅"> -->
            <TabList :title="i18n.global.t('message.DateAlter.c')">
                <TabB></TabB>
            </TabList>
            <!-- <TabList title="最高交易量"> -->
            <TabList :title="i18n.global.t('message.DateAlter.d')" :tab-btn="true" :title_nvas="navs">
                <TabC></TabC>
            </TabList>
            <!-- <TabList title="巨鲸监控"> -->
            <TabList :title="i18n.global.t('message.DateAlter.e')" :tab-btn="true">
                <TabD></TabD>
            </TabList>
        </div>
        <!-- <NavTitle :is-more="false" title="链上活动"> -->
        <NavTitle :is-more="false" :title="i18n.global.t('message.DateAlter.f')">
            <Lines></Lines>
        </NavTitle>
        <!-- <JTabY></JTabY> -->
        <Activity />
    </div>
</template>
<style lang="scss" scoped>
:deep(.tab) {
    overflow-x: hidden;

    .nvas {
        margin-top: 10px;
        border: 0.1px solid var(--border_);
    }

    .bdy {
        height: 450px;
    }

    .col1 {
        img {
            width: 20px;
            height: 20px;
        }
    }
}

:deep(.v-row):not(:last-child) {
    border-bottom: 1px solid var(--border_);
}

.tabList {
    padding-inline: 0;
}

.c-grid {
    margin-left: 30px;
    // width: 1440px;
    width: 100%;
    padding-right: 80px;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 21px;
    // background-color: red;
}

// .ac-all {
// width: 1531px;
// background-color: red;
// }
</style>
